import React from 'react';
import { Modal, Button } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import styles from './index.less';

type DataType = {
  text: string; // 弹窗文案
  onSubmit: () => void; // 弹窗确定时触发的事件
  width?: number; // 弹窗宽度
  isModalOpen: boolean; // 弹窗显示隐藏状态
  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>; // 修改弹窗显示隐藏状态
  loading?: boolean; // 弹窗loading
};

const modal = (props: DataType) => {
  const {
    text,
    onSubmit,
    width,
    isModalOpen,
    setIsModalOpen,
    loading = false,
  } = props;

  return (
    <Modal
      className={styles.model}
      width={width || 420}
      title="提示"
      open={isModalOpen}
      onCancel={() => {
        setIsModalOpen(false);
      }}
      footer={[
        <Button key="back" onClick={() => setIsModalOpen(false)}>
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading}
          onClick={onSubmit}
        >
          确定
        </Button>,
      ]}
    >
      <p>
        <ExclamationCircleFilled />
        {text}
      </p>
    </Modal>
  );
};

export default modal;
